import React from 'react';
import { Row, Col, Button, Form, Input, InputNumber, Checkbox, message,Modal } from 'antd';
import Region from '../../components/Region/Region';
const createForm = Form.create;
const FormItem = Form.Item;

function noop() {
  return false;
}

//自动登录选框
function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}

let Register = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      province: '110000', // 省
      city: '110100',  // 城市
      district: '110101', // 区域
      areaId: '110101',
      data: null,
      mobilePhone: '', //初始化
      validCode: '',   //图形验证码
      visible: false
    }
  },
  componentDidMount(){
    this.validCode()
  },
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      var params = this.props.form.getFieldsValue();
      params.address = this.state.areaId;
      console.log('params',params);
      Utils.sendAjax({
        url: '/user/applyReg',
        data: JSON.stringify(params),
        method: 'post',
        callback: (result) => {
          if (result.code === '200') {
            message.success(result.message);
            let goPathUrl = '/login';
            this.context.router.push(goPathUrl);

          } else {
            message.error(result.message, 10)
          }
        }
      });
    });
  },
  //图形验证码
  validCode() {
    var img = document.getElementById("Img");
    img.src = Utils.apiServer + "/validImg?rnd=" + Math.random();
  },

  success() {
    Modal.success({
      title: '提交成功',
      okText:'确定',
      width:195
    });
  },

  changeAreaId(area) {
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      district: selectedArea,
      areaId: area,
    })
  },

  render() {

    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;

    // const addressProps = getFieldProps('address', {
    //   rules: [
    //     {required: true, message: '请输入所在城市'},
    //     {validator: Utils.city},
    //   ],
    // });

    const tenementCountProps = getFieldProps('tenementCount', {
      rules: [
        {required: true, message: '请输入房间数量'},
        {validator: Utils.number},
      ],
    });

    const contactsProps = getFieldProps('contacts', {
      rules: [
        {required: true, message: '请输入联系人'},
        {validator: Utils.name},
      ],
    });

    const contactPhoneProps = getFieldProps('contactPhone', {
      rules: [
        {required: true, message: '请输入联系电话'},
        {validator: Utils.phone},
      ],
      onChange: (e) => {
        this.setState({mobilePhone: e.target.value});
        console.log(e.target.value);
      },
    });

    const validCodeProps = getFieldProps('validCode', {
      rules: [
        {required: true, message: '请输入图形验证码'},
      ],
    
    });

    const remarkProps = getFieldProps('remark', {

    });

    return (
        <div className="register-in">
          <div className="main-content">
            <section>
              <Form horizontal form={this.props.form}>
                <FormItem
                    hasFeedback>
                  <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId} /> 
                </FormItem>
                <FormItem
                    hasFeedback
                    className="room-num">
                  <Input {...tenementCountProps} placeholder="房间数量"/>
                  <span className="set">套</span>
                </FormItem>
                <FormItem
                    hasFeedback>
                  <Input  {...contactsProps} placeholder="联系人"/>
                </FormItem>
                <FormItem
                    hasFeedback>
                  <Input {...contactPhoneProps} placeholder="联系电话"/>
                </FormItem>
                <FormItem
                    hasFeedback
                    className="validCode">
                  <Input  {...validCodeProps} placeholder="请输入图形验证码"/>
                 
                  <img id='Img' src={`${Utils.apiServer}/validImg`} onClick={this.validCode} />
                </FormItem>
                <FormItem
                    hasFeedback>
                  <Input className="remark" type="textarea" placeholder="备注" {...remarkProps}/>
                </FormItem>
                <FormItem
                    hasFeedback>
                  <Button className="register-button" type="primary"
                          onClick={this.handleSubmit}>确认提交</Button>
                    <p>对话框的内容</p>
                </FormItem>
              </Form>
            </section>
          </div>
        </div>
    );
  }
});
Register = createForm()(Register);
export default Register;
